<template>
  <div ref="modifyObj" style="height: 260px;"></div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      },
      data: {
        type: String,
        default:''
      }
    },
    data () {
      return {
        pieLegend: []
      }
    },
    created () {

    },
    watch: {
      data: function (newData) {
        if (newData.length > 0) {
          this.$nextTick(() => {
            // newData.forEach(i => {
            //   this.pieLegend.push(i.name)
            //   // console.log('this.pieLegend :>> ', this.pieLegend);
            // });
            this.getModifyObj()
          });
        }
      },
    },
    mounted () {
      this.getModifyObj()
    },
    methods: {
      getModifyObj () {
        //   console.log(' this.$echarts :>> ',  this);
        // let myChart = this.$echarts.init(this.$refs.modifyObj);
        let myChart = this.$echarts.init(this.$refs.modifyObj);

        let option = {
          title: {
            show: true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: this.title,
            top:10,
            left:10
          },
          series: [
            {
              type: 'gauge',
              center: ["50%", "53%"],
              radius:'90%',
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                  ]
                }
              },
              pointer: {
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                distance: -10,
                length: 8,
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              },
              splitLine: {
                distance: -10,
                length: 10,
                lineStyle: {
                  color: '#fff',
                  width: 4
                }
              },
              axisLabel: {
                color: 'auto',
                distance: 20,
                fontSize: 12
              },
              detail: {
                valueAnimation: true,
                formatter: '使用率 {value}%',
                color: 'auto',
                fontSize: 12
              },
              data: [
                {
                  value: this.data.split('%')[0]
                }
              ]
            }
          ]
        };
        // setInterval(function () {
        //   myChart.setOption({
        //     series: [
        //       {
        //         data: [
        //           {
        //             value: +(Math.random() * 100).toFixed(2)
        //           }
        //         ]
        //       }
        //     ]
        //   });
        // }, 2000);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option, true);
      },
    }
  }
</script>